<template>
  <div class="component-container">
    <div class="component-container_main">
      <el-cascader-panel
        v-model="goodsInfo.categoryId"
        :options="categoryOptions"
        :props="{ emitPath: false }"
        ref="categoryRef"
        @change="handleCategoryChange"
      />
      <div style="margin-top: 20px">
        <el-link type="info" v-show="pathLabels.length > 0" :underline="false"
          >您选择的商品分类:</el-link
        >
        <el-link
          type="primary"
          v-for="(item, index) in pathLabels"
          :key="index"
          :underline="false"
          class="ml-[5px]"
          style="margin-left: 5px"
          >{{ item }}
          <span
            v-show="index < pathLabels.length - 1"
            style="width: 1em; height: 1em; margin-left: 5px"
            ><i-ep-caret-right
          /></span>
        </el-link>
      </div>
    </div>
    <div class="component-container_footer">
      <el-button type="primary" @click="handleNext">下一步，填写商品信息</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCategoryOptions } from '@/api/pms/category'

const emit = defineEmits(['update:modelValue', 'next'])
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  }
})
const goodsInfo: any = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const state = reactive({
  categoryOptions: [] as OptionType[],
  pathLabels: []
})
const { categoryOptions, pathLabels } = toRefs(state)
function loadData() {
  getCategoryOptions().then((res) => {
    state.categoryOptions = res.data
    // console.log(goodsInfo.value.categoryId)

    if (goodsInfo.value.id) {
      nextTick(() => {
        handleCategoryChange()
      })
    }
  })
}
const categoryRef = ref(ElCascaderPanel) //cascader 面板的 ref 级联选择器
const handleCategoryChange = () => {
  const checkNode = categoryRef.value.getCheckedNodes()[0] //
  state.pathLabels = checkNode.pathLabels
  goodsInfo.value.categoryId = checkNode.value
}
const handleNext = () => {
  if (!goodsInfo.value.categoryId) {
    ElMessage.warning('请选择商品分类')
    return false
  }
  emit('next')
}
onMounted(() => {
  loadData()
})
</script>

<style scoped>
</style>